<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>

        <style>
            .ball {
                width: 100px;
                height: 100px;
                background: red;
            }
            .ball1 {
                animation: move1 3s alternate infinite ease-in-out;
            }
            .ball2 {
                position: fixed;
                left: 8px;
                animation: move2 3s alternate infinite ease-in-out;
            }
            @keyframes move1 {
                to {
                    transform: translate(150px);
                }
            }
            @keyframes move2 {
                to {
                    left: 150px;
                }
            }
        </style>
    </head>
    <body>
        <button id="btn">渲染主线程占用4秒</button>
        <p>transform</p>
        <div class="ball ball1"></div>
        <p>left</p>
        <div class="ball ball2"></div>
        <script>
            function defer(duration) {
                var start = Date.now();
                console.log("循环", start);
                while (Date.now() - start < duration) {}
            }
            btn.onclick = function () {
                defer(4000);
            };
        </script>
    </body>
</html>
